<template>
  <div >
    <div class="header">
      <input type="text" placeholder="用户查询">
      <button @click="queryGoods">查询</button>
    </div>
    <div class="main">
      <el-table
        :data="user" border size='mini'  style="width: 100%;">
        <el-table-column prop="user_id" label="id" width="80"></el-table-column>
        <el-table-column prop="user_name" label="用户名" width="120"></el-table-column>
        <el-table-column label="用户密码" width="120">
          ******
        </el-table-column>
        <el-table-column prop="user_icon" label="用户头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.user_icon">
          </template>
        </el-table-column>
        <el-table-column prop="user_create_time" label="注册时间" width="240"></el-table-column>
        <el-table-column label="操作" width="240">
          <button @click="editGoods">编辑</button>
          <button @click="deleteGoods" style="margin-left:10px;background:#E64347;">删除</button>
        </el-table-column>
      </el-table> 
    </div>
  </div>
</template>

<script>
import {reqUserAdmin} from '../../../api'
export default {
  name:'user',
  data() {
    return {
      user:[]
    }
  },
  methods: {
    queryGoods(){
      this.$message.success("开发中,敬请期待！")
    },
    editGoods(){
      this.$message.warning("开发中,敬请期待！")
    },
    deleteGoods(){
      this.$message.error("开发中,敬请期待！")
    }
  },
  async mounted() {
    this.user = await reqUserAdmin()
  },
}
</script>

<style scoped>

  .header{
    background: white;
    padding: 8px 0;
  }
  .main{
    background: white;
    margin-top: 10px;
    padding:10px;
  }
  input{
    background: rgb(248, 246, 246);
    height: 30px;
    max-width: 50%;
    margin-left: 10px;
    padding-left: 10px;
  }
  .header button{
    height: 30px;
    margin-left: 8px;
  }
</style>